<template>
  <div class="box">
    <!-- 头部搜索框部分 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="false" :goSearchFc="searchClick" />
    <!-- 中部表格部分 -->
    <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>
    <!-- 底部分页部分 -->
    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryAll.startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="queryAll.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 审核模块布局 -->
    <el-drawer :before-close="handleClose" title="客户信息" :visible.sync="drawer" direction="rtl" size="55%">
      <el-form :model="form" ref="basisRulesRef" inline label-width="140px">
        <el-tabs v-model="activeName" @tab-click="handleTabsClick">
          <el-tab-pane v-for="(item,index) in tempTableData" :key="index" :label="item.tabPaneLabel" :name="item.tabPaneName" style="padding:0 20px">
            <el-form-item v-for="(subItem,subIndex) in item.subFormData" :key="subIndex" :label="subItem.labelName" :prop="subItem.propName">
              <el-input readonly v-if="subItem.labelName!='经营范围' && subItem.labelName!='备注'" :value="form[subItem.propName] |businessTypeChange(subItem.labelName)" size="mini"></el-input>
              <el-input readonly type="textarea" v-if="subItem.labelName=='经营范围' || subItem.labelName=='备注'" v-model="form[subItem.propName]" size="mini"></el-input>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="danger" @click="handeleNoPass">不 通 过</el-button>
        <el-button size="small" type="primary" @click="handelePass">通 过</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import BaseTable from '@/components/BaseTable'
  import headerSearch from './component/headerSearch'
export default {
  name: 'clientAudit',
  components: { BaseTable, headerSearch },

  data() {
    return {
      flagHint:false,
      tempTableData: [
        {
          tabPaneLabel: "基本信息",
          tabPaneName: "first",
          subFormData: [
            { labelName: "客户名称", propName: "companyName" },
            { labelName: "客户简称", propName: "companyChineseAbbreviation" },
            { labelName: "英文名称", propName: "companyEnglishAbbreviation" },
            { labelName: "速记码", propName: "shorthandCode" },
            // {labelName:"客户名称",propName:"companyName"},
            { labelName: "客户类型", propName: "companyTypeName" },
            { labelName: "统一社会信用代码", propName: "socialUnifiedCreditCode" },
            { labelName: "组织机构代码证", propName: "organizationCode" },
            { labelName: "公司电话", propName: "companyPhone" },
            { labelName: "抬头发票", propName: "bankAccount" },
            { labelName: "税号", propName: "taxId" },
            { labelName: "法人名称", propName: "legalPersonName" },
            { labelName: "法人电话", propName: "legalPersonTelephone" },
            { labelName: "法人身份证", propName: "legalPersonIdNo" }
          ]
        },
        {
          tabPaneLabel: "其他信息",
          tabPaneName: "second",
          subFormData: [
            { labelName: "公司联系人身份证", propName: "linkmanIdNo" },
            { labelName: "公司联系电话", propName: "linkmanPhone" },
            { labelName: "单位地址", propName: "address" },
            { labelName: "开户银行", propName: "bank" },
            { labelName: "银行账户", propName: "bankAccount" },
            { labelName: "所属省份", propName: "companyProvince" },
            { labelName: "所属城市", propName: "companyCity" },
            { labelName: "所属母公司", propName: "parentCompanyName" },
            { labelName: "经营范围", propName: "manageScope" },
            { labelName: "备注", propName: "remark" }]
        },
        {
          tabPaneLabel: "个人信息",
          tabPaneName: "third",
          subFormData: [
            { labelName: "用户名", propName: "accNo" },
            { labelName: "姓名", propName: "userName" },
            { labelName: "手机号", propName: "accTelephone" },
            { labelName: "身份证号", propName: "idNo" },
            { labelName: "邮箱", propName: "accEmail" },]
        }],
      // 搜索框显示对象
      selectObject: [
        {
          name: "客户名称",
          type: "inputVerify",
          verifyTpye: "char",
          modelName: "companyName"
        }
      ],
      cargotableDataColumns: [
        {
          prop: 'consumerTypeLabel',
          label: '客户类型'
        },
        {
          prop: 'accNo',
          label: '用户名'
        },
        {
          prop: 'userName',
          label: '姓名'
        },
        {
          prop: 'companyName',
          label: '客户名称'
        },
        {
          width: 120,
          prop: 'state',
          label: '审核状态',
          render(h, params) {
            if (params.row.approvalStatus == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            } else if (params.row.approvalStatus == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'danger'
                },
                domProps: {
                  innerHTML: '审核未通过'
                }
              })
            } else {
              return h('el-tag', {
                props: {
                  size: 'mini',
                },
                domProps: {
                  innerHTML: '未审核'
                }
              })
            }
          }
        },
        {
          prop: 'companyChineseAbbreviation',
          label: '客户简称'
        },
        {
          prop: 'shorthandCode',
          label: '速记码'
        },
        {
          prop: 'companyTypeName',
          label: '客户类型'
        },
        { prop: 'legalPersonName', label: '法人名称' },
        { prop: 'legalPersonTelephone', label: '法人电话' },
        { prop: 'legalPersonIdNo', label: '法人身份证', width: 100 },

        {
          prop: 'companyProvince',
          label: '所属省份'
        },
        {
          prop: 'companyCity',
          label: '所属城市'
        },
        {
          prop: 'parentCompanyName',
          label: '母公司名称',
          width: 100
        },
        {
          prop: 'linkmanPhone',
          label: '公司联系电话',
          width: 110
        },
        {
          prop: 'manageScope',
          label: '经营范围'
        },
        {
          prop: 'bankAccount',
          label: '抬头发票'
        },
        {
          prop: 'taxId',
          label: '税号'
        },

        {
          prop: 'bank',
          label: '开户银行'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',

              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
                      "<span style='color:#EFAE12;'><i class='iconfont icon-1-011'></i><span  style='padding-left:5px;'>审核</span></span>"
                  },
                  on: {
                    click: () => {
                      click: this.handleAudit(params.row)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableData: [],
      queryAll: {
        companyName: '',
        startpage: 1,
        pagesize: 10
      },
      total: 0,
      loading: false,
      drawer: false,
      form: {},

      activeName: 'first', //tabs 默认显示
      provinceData: [],
      cityData: []
    }
  },
  filters: {
    businessTypeChange: function (value, title) {
      // if (value != undefined) {
      //   if (title == '客户类型') {
      //     let businessTypeName = ''
      //     value.includes('01') ? businessTypeName += '货代 ' : ''
      //     value.includes('03') ? businessTypeName += '船代 ' : ''
      //     return businessTypeName;
      //   }else{
          return value
      //   }
      // }
    }
  },
  async activated() {
    var menuArr = []
    var menuId = ""
    if(localStorage.getItem("menuArr")){
      menuArr = JSON.parse(localStorage.getItem("menuArr"))
    }
    menuArr.map(item=>{
      item.children.map(v=>{
        if(window.location.href.includes(v.url)){
          menuId = v.id
        }
      })
    })

    if(menuId){
      var menuData = []
      await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`,{ timeout: 30000,})
              .then(res => {
                res.data.data.map(item=>{
                  menuData.push(item.resourceName)
                })

                if(!menuData.includes("审核")){
                  this.cargotableDataColumns.map((item,index)=>{
                    if(item.label == "操作"){
                      this.cargotableDataColumns.pop()
                    }
                  })
                }
              }).catch((error)=>{})
    }
     if (this.$store.state.app.searchResouce == "menu") {
      this.queryAll = {
        companyName: '',
        startpage: 1,
        pagesize: 10
      }
      this.getDataList()
      this.getprovinceData()
    }
  },
  computed:{
      tableHeight:function(){
          return this.$store.state.tableHeight
      }
  },
  methods: {
    setPro() {
      // //设置省名称
      this.cargotableData.forEach(item => {
        if (item.province) {
          this.provinceData.forEach(v => {
            if (v.dm == item.province) {
              item.companyProvince = v.mc

              this.getcityData(item.province)
            }
          })
        }
      })
    },
    setCity() {
      this.cargotableData.forEach(item => {
        if (item.city) {
          this.cityData.forEach(v => {
            if (v.dm == item.city) {
              this.$set(item, 'companyCity', v.mc)
            }
          })
        }
      })
    },
    // 所属省份
    async getprovinceData() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/public/getprovince`
      )
      this.provinceData = res.data.data
      // console.log(this.provinceData)

      // this.getcityData(this.form.province)
    },
    async getcityData(z) {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/public/getcitybyprovince?dm=${z}`
      )
      this.cityData = res.data.data

      this.setCity()
    },
    // 查询调用
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData);
      this.getDataList()
    },
    // 获取table数据
    async getDataList() {
      this.loading = true
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/exsupplier/${this.$version}/listexcustom`,
        {
          params: this.queryAll
        }
      ).then(res => {

        this.cargotableData = res.data.data.pages
        this.cargotableData.forEach(v => {

          // v.consumerTypeLabel = v.consumer_type == '30' ? '司机' : ''
          v.consumerTypeLabel = v.consumer_type == '20' ? '个人用户' : v.consumer_type == '30' ? "司机" :  '企业用户'
          // v.consumerTypeLabel = v.consumer_type == '20' ? '个人用户' : v.consumer_type == '10' ? '企业用户'  : v.consumer_type == '30' ? '司机' : ''
        })
        // 分页
        this.queryAll.startpage = res.data.data.pageNum // 当前页
        this.queryAll.pagesize = res.data.data.pageSize // 每页多少
        this.total = res.data.data.totalNum
        this.loading = false

        this.setPro()
      }).catch(error => { this.loading = false })
    },
    //审核
    handleAudit(data) {
      console.log(data)
      this.form = JSON.parse(JSON.stringify(data))
      this.drawer = true
      if (data.consumer_type == '20') {
        this.activeName = 'third'
      } else {
        this.activeName = 'first'
      }
    },

    async handelePass() {
      await this.$http.put(
        `/${this.$ServiceName}/api/external/exsupplier/${this.$version}/verify`,
        {
          approvalStatus: '1',
          id: this.form.id,
          parentId: this.form.parentId,
          companyName: this.form.companyName,
          sortNum: this.form.sortNum,
          companyType: this.form.ctCode,
          taxId: this.form.taxId,
          shorthandCode: this.form.shorthandCode?this.form.shorthandCode:'',
          companyEnglishName: this.form.companyEnglishAbbreviation,
          companyChineseAbbreviation: this.form.companyChineseAbbreviation,
          bankAccount: this.form.bankAccount,
          bank: this.form.bank,
          manageScope: this.form.textarea,
          businessScope: this.form.manageScope,
          companyPhone: this.form.companyPhone,
          linkmanIdNo: this.form.linkmanIdNo,
          linkman: this.form.compPersonName,
          parentCompanyName: this.form.parentCompanyName,
          socialUnifiedCreditCode: this.form.socialUnitedCreditCode,
          manager: this.form.linkmanIdNo,
          companyTypeCode: this.form.companyTypeCode,
          legalPersonIdNo: this.form.legalPersonIdNo,
          legalPersonName: this.form.legalPersonName,
          socialUnifiedCreditCode: this.form.socialUnifiedCreditCode,
          legalPersonTelephone: this.form.legalPersonTelephone,
          province: this.form.province,
          city: this.form.city,
          businessType: this.form.businessType,
          accNo: this.form.accNo,
          accPwd: this.form.accPwd,
          accType: this.form.accType,
          accTelephone: this.form.accTelephone,
          accEmail: this.form.accEmail,
          userName: this.form.userName,
          idType: this.form.idType,
          idNo: this.form.idNo,
          isAdmin: this.form.isAdmin,
          avatar: this.form.avatar,
          lastLoginIp: this.form.lastLoginIp,
          lastLoginTime: this.form.lastLoginTime,
          userNo: this.form.userNo,
          email: this.form.accEmail,
          card: this.form.idNo,
          phone: this.form.accTelephone,
          consumerType: this.form.consumer_type
        }
      ).then(res => {
        this.$message.success(res.data.msg)
        this.getDataList()
        this.drawer = false
      }).catch(error => { })
    },
    async handeleNoPass() {
      const res = await this.$http.put(
        `/${this.$ServiceName}/api/external/exsupplier/${this.$version}/verify`,
        {
          approvalStatus: '2',
          id: this.form.id,
          parentId: this.form.parentId,
          companyName: this.form.companyName,
          sortNum: this.form.sortNum,
          companyType: this.form.ctCode,
          taxId: this.form.taxId,
          shorthandCode: this.form.shorthandCode,
          companyEnglishName: this.form.companyEnglishAbbreviation,
          companyChineseAbbreviation: this.form.companyChineseAbbreviation,
          bankAccount: this.form.bankAccount,
          bank: this.form.bank,
          manageScope: this.form.textarea,
          businessScope: this.form.manageScope,
          companyPhone: this.form.companyPhone,
          linkmanIdNo: this.form.linkmanIdNo,
          linkman: this.form.compPersonName,
          parentCompanyName: this.form.parentCompanyName,
          socialUnifiedCreditCode: this.form.socialUnitedCreditCode,
          // legalPersonIdNo: this.form.linkmanIdNo,
          manager: this.form.linkmanIdNo,
          companyTypeCode: this.form.companyTypeCode,
          legalPersonIdNo: this.form.legalPersonIdNo,
          legalPersonName: this.form.legalPersonName,
          legalPersonTelephone: this.form.legalPersonTelephone,
          province: this.form.province,
          city: this.form.city,
          businessType: this.form.businessType,
          accNo: this.form.accNo,
          accPwd: this.form.accPwd,
          accType: this.form.accType,
          accTelephone: this.form.accTelephone,
          accEmail: this.form.accEmail,
          userName: this.form.userName,
          idType: this.form.idType,
          idNo: this.form.idNo,
          isAdmin: this.form.isAdmin,
          avatar: this.form.avatar,
          lastLoginIp: this.form.lastLoginIp,
          lastLoginTime: this.form.lastLoginTime,
          userNo: this.form.userNo
        }
      ).then(res => {
        this.$message.success(res.data.msg)
        this.getDataList()
        this.drawer = false
      }).catch(error => { })
    },

    handleClose(done) {
      // if (this.flagHint) {
      //   this.$confirm('您已修改了数据，确定是否关闭？')
      //           .then(_ => {
      //             done()
      //           })
      //           .catch(_ => {})
      // } else {
        done()
      // }
    },
    handleTabsClick() { },
    //分页
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getDataList()
    }
  }
}
</script>

<style lang="less" scoped>
.selectBox {

  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-left: none;
  line-height: 28px;
  height: 50px;
  padding-left: 14px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.page {
  background: #ffffff;
  text-align: right;
  border-radius: 0 0 4px 4px;
  padding: 5px 20px;
}
.el-input {
  width: 100%;
}
/deep/.el-tabs__nav-scroll {
  margin: 0 20px;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
  padding-bottom: 50px;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}
</style>
